<template>
  <div class="wrapper">
    <div class="login-wrapper">
      <div class="login-banner">
        <div class="login-img-wrapper">
          <img src="../assets/images/login-image.png" alt="login-image" />
        </div>
        <div class="login-info-wrapper">
          <div class="login-logo-wrapper">
            <img src="../assets/images/Logo.png" alt="Logo" />
            <span>人工智能教学管理平台</span>
          </div>
          <div class="login-info">
            <div class="login-number login-input-wrapper">
              <i class="fas fa-user"></i>
              <input
                class="login-number-input login-input"
                type="text"
                placeholder="请输入账号"
              />
            </div>
            <div class="login-key login-input-wrapper">
              <i class="fas fa-lock"></i>
              <input
                class="login-key-input login-input"
                type="key"
                placeholder="请输入密码"
              />
            </div>
            <div class="login-remeberme">
              <label class="remeber-label">
                <input
                  class="remeber-input"
                  type="checkbox"
                  style="display: none"
                />
                <span class="remeber-wrapper"> </span>
                记住用户名
              </label>
              <el-select v-model="value" placeholder="请选择" :size="`mini`">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <el-button type="primary" round style="" @click="JumpHomePage"
              >登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

interface itemObj {
  value: string;
  label: string;
}
@Component({
  name: "Login",
  components: {
  },
})
export default class extends Vue {
  JumpHomePage(): void {
    this.$router.push({
      name: "main",
    });
  }
  options:Array<itemObj>= [
    {
      value: "选项1",
      label: "学生端",
    },
    {
      value: "选项2",
      label: "教师端",
    },
    {
      value: "选项3",
      label: "学校端",
    }
  ];
  value= "学生端";
}
</script>
<style>
.wrapper {
  background-image: url("../assets/images/login-background.jpg");
  width: 100vw;
  height: 100vh;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 978px;
  height: 583px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0.8px 2.4px  0 0 rgba(255,255,255,0);
  border: 0.01rem solid #bbb;
}
.login-banner {
  display: flex;
  position: relative;
  width: 834px;
  height: 402px;
}
.login-img-wrapper {
  margin-top: 45px;
  width: 50%;
}
.login-wrapper img {
  width: 100%;
  height: 100%;
}
.login-info-wrapper {
  position: relative;
  width: 50%;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.login-logo-wrapper {
  width: 50%;
  box-sizing: border-box;
}
.login-logo-wrapper > img {
  width: 168px;
  height: 37px;
  display: block;
}
.login-logo-wrapper > span {
  display: block;
  text-align: left;
  color: #101010;
  font-weight: 700;
  font-size: 17.5px;
  margin-top: 6px;
}

.login-info {
  width: 296px;
  height: 180px;
  margin-top: 50px;
  text-align: left;
  color: #bbb;
}
.login-input-wrapper {
  font-size: 14px;
  padding: 20px 0;
  border-bottom: 2px solid #e2dede;
}
.login-input-wrapper > i {
  margin-right: 5px;
}
.login-input {
  outline: none;
  border: none;
}
.login-remeberme {
  margin-top: 30px;
  display: inline-block;
  position: relative;
}
.label-remeberme {
  color: #2c3e50;
  font-size: 14px;
  vertical-align: middle;
}

.remeber-wrapper {
  cursor: pointer;
  margin-top: 1px;
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid #e2dede;
}
.remeber-input:checked + .remeber-wrapper {
  background-color: #2d8cf0;
}
.el-select{
    width: 100px;
    display: inline-block;
    margin-left: 90px;
}
.el-button.is-round {
  font-size: 20px;
  border-radius: 40px;
  width: 256px;
  height: 51px;
  margin-top: 30px;
  background-color: #1989fa;
}
</style>